<template>
	<view>
		<!-- tab区域 -->
		<scroll-view class="navbar" scroll-x="true" :scroll-into-view="'navbar'+selectClassifyIda"
			scroll-with-animation="true" :scroll-left="sleft">
			<view class="tabListCon flex ac">
				<view @tap="tabListChange(item.id)" class="nav-item"
					:class="selectClassifyId==item.id?'tabListItems':''" :id="'navbar'+item.id"
					v-for="(item,index) in datalia" :key="index">
					<view class="nav-item-imagebox">
						<image :class="selectClassifyId==item.id?'nav-item-image-art':'nav-item-image'" mode="widthFix"
							:src="item.image"></image>
					</view>
					<view :class="selectClassifyId==item.id?'nav-item-text-art':'nav-item-text'">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>

		<!-- 数据内容 -->
		<view class="listbox">
			<view v-for="(item,index) in shuadata" class="listview">
				<view class="listdiv">
					<view class="listdiv-image echargeview" :style="{backgroundImage:'url('+item.background+')'}">
						<view style="width: 100%;height: 30rpx;"></view>
						<view class="title-text">{{item.title}}</view>
						<view class="title-neir">{{item.content}}</view>
					</view>
					<view class="lista-boxlist">
						<view class="lista-box">
							<view v-for="(items,indexs) in item.list" class="lista-view flex">
								<view class="lista-image">
									<image :src="items.imageurl"></image>
									<view class="lista-imageat">空闲中</view>
								</view>
								<view>
									<view class="flex ac" style="margin-left: 20rpx;margin-top: 20rpx;">
										<image style="width: 35rpx;height: 35rpx;margin-right: 10rpx;"
											src="https://duimianimg.loovee.com/style/ukk/act/client/play_way_list/img/ukaka_sy_icon_kongxian-3cf6f64.png">
										</image>
										<view class="lista-text">{{items.text}}</view>
									</view>
									<view class="flex ac" style="margin-top: 60rpx;">
										<view style="flex: 1;margin-left: 19rpx;">
											<text
												style="font-size: 36rpx;color:#ff4e2e;font-weight: bold;margin-right:5rpx;">{{items.mun}}</text>
											<text style="font-size: 26rpx;color:#ff4e2e;">u币</text>
										</view>
										<view class="platform">{{items.machine}}台</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectClassifyId: 0,
				selectClassifyIda: 0,
				datalia: [{
						id: 0,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FnqRFzUem5tc2VZ21_JCadOg6dsT.png',
						name: '娃多多'
					},
					{
						id: 1,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FswDl1RiB7tK3coEBlnh-OWu2TvB.png',
						name: '迷你精品机'
					},
					{
						id: 2,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fpd98NnMGzg5HpFIMULP4WAmRpKf.png',
						name: '精品机'
					},
					{
						id: 3,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FvHHH6jiwDiXCwXFxijftfBplKHn.png',
						name: '叠叠乐'
					},
					{
						id: 4,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fil9OuVheuwzH62tXBR2XAEp1Gib.png',
						name: '台式篮球'
					},
					{
						id: 5,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FnjVCdn8fCMaPqVQzo_hj5onCyGE.png',
						name: '台湾爪玩法'
					},
					{
						id: 6,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FkXRC0iDGjq1VZar4B5G7qt-oKom.png',
						name: '无挡板玩法'
					},
					{
						id: 7,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjJ25ehequQW9tArMdn01OmO9VI0.png',
						name: '半挡板玩法'
					},
					{
						id: 8,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FriQwdvluPaYRIewDQaWKjQWDgLN.png',
						name: '中间洞口玩'
					},
					{
						id: 9,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FhwVOIBzFoXYvqf0gd8KyrzzNXUM.png',
						name: '烧烤架玩法'
					},
					{
						id: 10,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FkltN2xZYH9D4h5b6tOwn9kzfn8t.png',
						name: '乒乓球玩法'
					},
					{
						id: 11,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FhqEaUuG4oQ4S7i9Xu0y2cycw2gf.png',
						name: '双杆玩法'
					},
					{
						id: 12,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FhmD-YyDu6LMmG7tkw1tCFj9BmBe.png',
						name: '堆堆乐'
					},
					{
						id: 13,
						image: 'https://duimianimg.loovee.com/style/jww/act/client/play_way_list/img/mz_wf_icon_diediele-1df4660.png',
						name: '零食大作战'
					},
					{
						id: 14,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FvnKMOVtkzLqp6BmnyHDTCKFwhtI.png',
						name: '弹弹乐'
					},
					{
						id: 15,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FsXQW4DKff1BbkaopzU-b6jJs_9L.png',
						name: '磁铁吸吸乐'
					},
					{
						id: 16,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fm3HL6TbFbd9bJgO4SdlgB7jzuZ6.png',
						name: '幸运滚滚球'
					},
					{
						id: 17,
						image: 'https://duimianimg.loovee.com/style/jww/act/client/play_way_list/img/mz_wf_icon_diediele-1df4660.png',
						name: '迷你高尔夫'
					},
				],
				shuadata: [{
						background: 'https://duimianimg.loovee.com/style/jww/act/client/play_way_list/img/mz_wf_kapian_bandangban-02dd764.png',
						title: '割纸机',
						content: '将纸割断，娃娃就是你的了',
						list: [{
								mun: 25,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/91c21974257472fe6bbcb9d3fd72405e.png?w=800&h=800',
								machine: 3,
								text: '卡通星星兔狐狸单支花束',
							},
							{
								mun: 30,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/bd48349f5e2a8c3ccf182895f8b0b778.jpg?w=800&h=800',
								machine: 2,
								text: '卡通吉吉熊的憨乐生活盲盒摆件',
							},
							{
								mun: 25,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/bb5330038407b037435ceb7f11a4867e.jpg?w=800&h=800',
								machine: 1,
								text: '得宝樱花味迷你印花纸手帕12包',
							}
						]
					},
					{
						background: 'https://duimianimg.loovee.com/style/jww/act/client/play_way_list/img/mz_wf_kapian_diediele-736ace4.png',
						title: '蘑菇机',
						content: '将蘑菇全部拔出，并使其掉入',
						list: [{
							mun: 30,
							imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/0c6e3b719c4382ce92b597830c0ae593.png?w=800&h=800',
							machine: 2,
							text: '吉吉熊3d立体口罩30片',
						}]
					},
					{
						background: 'https://duimianimg.loovee.com/style/jww/act/client/play_way_list/img/mz_wf_kapian_gaoerfu-e9d338c.png',
						title: '大转盘',
						content: '转出欧气~',
						list: [{
								mun: 20,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/1c6b9ef67636cb39cb7863f225eedaea.png?w=800&h=800',
								machine: 1,
								text: '国潮创意文字鼠标垫20x0.2cm',
							},
							{
								mun: 20,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/69dc71d79351a93e99268af8c50d0bad.jpg?w=800&h=800',
								machine: 1,
								text: '花花萌宠绳挂件',
							}
						]
					},
					{
						background: 'https://duimianimg.loovee.com/style/jww/act/client/play_way_list/img/mz_wf_kapian_lanqiu-173cef5.png',
						title: '投篮机',
						content: '打篮球“运动运动”吧',
						list: [{
							mun: 20,
							imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/69dc71d79351a93e99268af8c50d0bad.jpg?w=800&h=800',
							machine: 1,
							text: '花花萌宠绳挂件',
						}]
					},
					{
						background: 'https://duimianimg.loovee.com/style/jww/act/client/play_way_list/img/mz_wf_kapian_longxia-96158b9.png',
						title: '叠高高',
						content: '将娃娃们叠起来，使其滚落进右侧',
						list: [{
								mun: 25,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/91c21974257472fe6bbcb9d3fd72405e.png?w=800&h=800',
								machine: 3,
								text: '卡通星星兔狐狸单支花束',
							},
							{
								mun: 30,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/bd48349f5e2a8c3ccf182895f8b0b778.jpg?w=800&h=800',
								machine: 2,
								text: '卡通吉吉熊的憨乐生活盲盒摆件',
							},
							{
								mun: 25,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/bb5330038407b037435ceb7f11a4867e.jpg?w=800&h=800',
								machine: 1,
								text: '得宝樱花味迷你印花纸手帕12包',
							}
						]
					},
				]
			}
		},
		methods: {
			tabListChange(e) {
				var id = e;
				this.selectClassifyId = id
				var af = id
				this.selectClassifyIda = af - 2
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("playingmethod.css");
</style>